<template>
	<view class="page" style="min-height: 300vh;">
		<view class="title">
			4.10.onUnload页面卸载和onPageScroll监听页面滚动
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/essentials/template-syntax.html" text="模板语法"
				color="#007BFF"></uni-link>
		</view>
		<view class="p">
			onUnload一般用于卸载页面缓存的时候用到。
		</view>
		<uni-fab v-if="fixed" :pattern="pattern" :content="content" horizontal="left" vertical="bottom"
			direction="horizontal" @trigger="trigger"></uni-fab>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const fixed = ref(false)
	const pattern = ref({
		color: '#7A7E83',
		backgroundColor: '#fff',
		selectedColor: '#007AFF',
		buttonColor: '#007AFF',
		iconColor: '#fff'
	})
	const content = ref([{
			iconPath: '/static/home.png',
			selectedIconPath: '/static/home-active.png',
			text: '顶部',
			active: false
		},
		{
			iconPath: '/static/star.png',
			selectedIconPath: '/static/star-active.png',
			text: '收藏',
			active: false
		}
	])

	const trigger = (e) => {
		content.value[e.index].active = !e.item.active;
		if (e.index === 0) {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			})
		}
	}
	onPageScroll((e) => {
		fixed.value = e.scrollTop > 200;
		content.value[0].active = false;
	})
</script>

<style lang="scss" scoped>

</style>